import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { CommonTable } from 'components';
import { peopleManageAction } from "./index";
import AddModal from './AddModal/AddModal';
import { Button, Icon, Popconfirm } from 'antd';
import styles from './PeopleManage.less';
import SearchList from './SearchList/SearchList';

const userStatus = {
    0: '冻结',
    1: '正常'
}

class PeopleManage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            info: {}
        };
        this.pageSize = 10;
        this.modifyId = '';
        this.searchParams = {};
        const _this = this;
        this.columns = [
            { title: '姓名', dataIndex: 'trueName', key: 'trueName' },
            { title: '账号', dataIndex: 'userName', key: 'userName' },
            { title: '手机', dataIndex: 'phoneNo', key: 'phoneNo' },
            { title: '部门', dataIndex: 'departmentStr', key: 'departmentStr' },
            { title: '角色', dataIndex: 'roleStr', key: 'roleStr' },
            {
                title: '状态',
                dataIndex: 'enabled',
                key: 'enabled',
                render(text) {
                    return userStatus[text];
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    return (
                        <div className={styles.btnWrapper}>
                            <span onClick={() =>_this.editTreeList(record)}><Icon type={'edit'}/></span>
                            <Popconfirm title={'确认要删除吗？'} onConfirm={() => _this.deleteTreeList(text)}>
                                <span><Icon type={'delete'}/></span>
                            </Popconfirm>
                        </div>
                    );
                }
            }
        ];
    }


    addPeople = () => {
        const { changeModalVisible, departmentData, roleData } = this.props;
        this.modifyId = '';
        const info = {
            userName: '',
            trueName: '',
            phoneNo: '',
            departmentId: departmentData.length > 0 ?  departmentData[0].id : '',
            roleId: roleData.length > 0 ? roleData[0].id : '',
            enabled: 1
        }
        this.setState({ info }, () => {
            changeModalVisible(true);
        })

    }
    editTreeList = (record) => {
        const { changeModalVisible } = this.props;
        const { id, departmentId, roleId, trueName, userName, enabled, phoneNo } = record;
        this.modifyId = id;
        const info = {
            departmentId,
            roleId,
            trueName,
            userName,
            enabled,
            phoneNo
        };
        // console.log('info=>',info);
        this.setState({ info }, () => {
            changeModalVisible(true);
        })

    }

    deleteTreeList = (id) => {
        const { deletePeopleData, getTableData } = this.props;
        deletePeopleData({ id }, () => {
            getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
        })
    }

    handlePageChange = (info) => {
        const { current, pageSize } = info;
        const { getTableData } = this.props;
        getTableData({ pageNum: current, pageSize, ...this.searchParams });

    }

    handleOk = (obj) => {
        const { addPeopleData, getTableData, updatePeopleData } = this.props;

        const callback = () =>{
            getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
        }

        if(this.modifyId === '') {
            addPeopleData(obj, callback);
            return;
        }
        updatePeopleData({ ...obj, id: this.modifyId }, callback);

    }
    handleCancel = () => {
        const { changeModalVisible } = this.props;
        this.modifyId = '';
        changeModalVisible(false);
    }
    submit = (obj) => {
        const { getTableData } = this.props;
        this.searchParams = obj;
        getTableData({ ...obj, pageSize: this.pageSize, pageNum: 1 })
    }
    componentDidMount() {
        const { getTableData, getRoleData, getDepartmentData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
        getRoleData({});
        getDepartmentData({});
    }

    render() {
        const { tableData: { data, pagination }, loading, departmentData, roleData, visible } = this.props;
        return (
            <div>
                <SearchList departmentData={departmentData} roleData={roleData} submit={this.submit}/>
                <div><Button type={'primary'} onClick={this.addPeople}>添加员工</Button></div>
                <CommonTable columns={this.columns} dataSource={data} pagination={pagination} loading={loading} handlePageChange={this.handlePageChange}/>
                <AddModal
                    departmentData={departmentData}
                    handleOk={this.handleOk}
                    handleCancel={this.handleCancel}
                    info={this.state.info}
                    visible={visible}
                    roleData={roleData}
                />
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    const { systemManageState: { peopleManageState } } = state;
    return {
        tableData: peopleManageState['tableData'],
        loading: peopleManageState['loading'],
        visible: peopleManageState['visible'],
        departmentData: peopleManageState['departmentData'],
        roleData: peopleManageState['roleData']
    };
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: peopleManageAction.pmgGetTableData,
        setTableData: peopleManageAction.pmgSetTableData,
        changeModalVisible: peopleManageAction.pmgChangeModalVisible,
        getDepartmentData: peopleManageAction.pmgGetDepartmentData,
        getRoleData: peopleManageAction.pmgGetRoleData,
        addPeopleData: peopleManageAction.pmgAddPeopleList,
        updatePeopleData: peopleManageAction.pmgUpdatePeopleList,
        deletePeopleData: peopleManageAction.pmgDelPeopleList
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(PeopleManage);